<template>
  <el-table :data="options" style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称">
            <div v-for="item in props.row.articleId" :key="item._id">
              <p>{{ item.name }}</p>
              <el-image
                :src="url + item.img[0]"
                style="width: 200px; height: 200px"
              ></el-image>
            </div>
          </el-form-item>
          <el-form-item label="收藏的用户">
            <span>{{ props.row.userId.userName }}</span>
          </el-form-item>
          <el-form-item label="商品 ID">
            <p v-for="item in props.row.articleId" :key="item._id">
              {{ item._id }}
            </p>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="用户 ID" prop="userId._id" align="center">
    </el-table-column>
    <el-table-column
      label="收藏商品个数"
      prop="articleId.length"
      align="center"
    >
    </el-table-column>
    <el-table-column label="描述" prop="articleId.type" align="center">
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>

<script>
import config from "@/utils/config.js";

import favoritesApi from "../../api/favorites.js";
export default {
  created() {
    favoritesApi.getAll().then((res) => {
      this.options = res[0];
      // this.options[0].map((item,index)=>{

      // })
    });
  },
  methods: {
    // 编辑事件
    render() {},
    // 删除事件
    async handleDelete(index, row) {
      console.log(index, row);
      await favoritesApi.delete(row._id);
      favoritesApi.getAll().then((res) => {
        this.options = res[0];
        // this.options[0].map((item,index)=>{
        // })
      });
      // this.options[0].map((item,index)=>{
      //   console.log( "options-->",item);
      // })
      // index为索引，row为本行数据
    },
  },
  data() {
    return {
      url: config["resource_server"],
      options: [],
    };
  },
};
</script>
